<template>
  <el-container>
    <el-main >
      <div class="basic-box">
        <div class="basic-box-title">基础信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">联系人</div>
          <div class="basic-box-item-text">{{ state.data && state.data.name }}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">店铺类型</div>
          <div class="basic-box-item-text">{{ state.data && state.data.serve_text }}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">联系电话</div>
          <div class="basic-box-item-text">{{ state.data && state.data.mobile }}</div>
        </div>
      </div>
      <div class="basic-box sa-m-t-20">
        <div class="basic-box-title">主体信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">主体类型</div>
          <div class="basic-box-item-text">
            <span v-if="state.data && state.data.entity_type === 'company'">企业</span>
            <span v-else>个人</span>
          </div>
        </div>
        <!-- <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">主体名称</div>
          <div class="basic-box-item-text">{{ state.data &&state.data.entity_name }}</div>
        </div> -->
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">商户名称</div>
          <div class="basic-box-item-text">{{ state.data &&state.data.merchant_name }}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">商户地址</div>
          <div class="basic-box-item-text">{{ state.data &&state.data.address }}</div>
        </div>
        <div class="basic-box-item sa-flex sa-col-top">
          <div class="basic-box-item-label">营业执照</div>
          <el-image :preview-src-list="[state.data && baseIMG+state.data.business_license]" class="basic-box-item-image" :src="state.data && baseIMG+state.data.business_license" fit="cover" />
        </div>
      </div>
      <div class="basic-box sa-m-t-20">
        <div class="basic-box-title">法人信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">证件类型</div>
          <div class="basic-box-item-text">
            <span v-if="state.data && state.data.legal_id_type === 'id_card'">居民身份证</span>
          </div>
        </div>
        <!-- <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">法人名称</div>
          <div class="basic-box-item-text">{{ state.data && state.data.legal_person_name }}</div>
        </div> -->
        <div class="basic-box-item sa-flex sa-col-top">
          <div class="basic-box-item-label">证件证明</div>
          <el-image  :preview-src-list="[state.data && baseIMG+state.data.protrait_card]" class="basic-box-item-image" :src="state.data && baseIMG+state.data.protrait_card" fit="cover" />
          <el-image  :preview-src-list="[state.data && baseIMG+state.data.reverse_card]" class="basic-box-item-image" :src="state.data && baseIMG+state.data.reverse_card" fit="cover" />
        </div>
      </div>
      <div class="basic-box sa-m-t-20">
        <div class="basic-box-title">代理信息</div>
       
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">代理人名称</div>
          <div class="basic-box-item-text">{{ state.data && state.data.agency_name }}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">代理人电话</div>
          <div class="basic-box-item-text">{{ state.data && state.data.agency_mobile }}</div>
        </div>
        
      </div>
    </el-main>
    <el-footer class="sa-footer--submit" v-if="state.data && state.data.status === 0">
      <el-button v-auth="'seller.admin.application.audit'" type="primary" @click="audit">审核</el-button>
    </el-footer>
    <el-footer class="sa-footer--submit" v-if="state.data && state.data.status === 1">
      <el-button v-auth="'seller.admin.application.audit'" type="primary" @click="openCode">填写资料</el-button>
    </el-footer>
  </el-container>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import { api } from './application.service';
  import Audit from './audit.vue';
  import code from './code.vue';

  import { useModal } from '@/sheep/hooks';
  const baseIMG=import.meta.env.SHEEP_IMG_URL
  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const state = reactive({
    data: null,
  });

  onMounted(() => {
    if (props.modal.params.id) {
      getData();
    }
  });

  const audit = () => {
    useModal(
      Audit,
      {
        title: '审核结果',
        id: props.modal.params.id,
        data:state.data
      },
      {
        confirm: () => {
          setTimeout(() => {
            emit('modalCallBack', { event: 'confirm' });
          }, 200);
        },
      },
    );
  };

  const openCode = () => {
    useModal(
      code,
      {
        title: '填写资料',
        id: props.modal.params.id,
        class:'sa-width-500'
      },
      {
        confirm: () => {
          setTimeout(() => {
            emit('modalCallBack', { event: 'confirm' });
          }, 200);
        },
      },
    );
  };

  const getData = async () => {
    const { error, data } = await api.detail(props.modal.params.id);
    if (error === 0) {
      state.data = data;
    }
  };
</script>

<style scoped lang="scss">
  .basic-box {
    .basic-box-title {
      width: max-content;
      position: relative;
      font-family: 'PingFangSC-Regular, sans-serif';
      font-size: 14px;
      color: #3D3D3D;
      z-index: 0;
    }

    .basic-box-title::after {
      pointer-events: none;
      content: "";
      position: absolute;
      height: 8px;
      background: var(--t-bg-active);
      bottom: 0;
      right: 0;
      left: 0;
      z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;

      .basic-box-item-label {
        min-width: 100px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
        margin-right: 20px;
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
</style>